<template>
    <ui-main title="分屏显示" noPadding>
        <!-- 下面放置页面内容 -->
        <ui-split-screen left="20%">
            <!--左布局-->
            <div slot="left">
                <el-tree :data="data" :props="defaultProps" accordion @node-click="handleNodeClick" style="border:none"></el-tree>
            </div>
            <!--右布局-->
            <div slot="right">
                <div class="ui flex h-100p">
                    <ui-main>
                        <!--可折叠的工具栏-->
                        <div slot="topAccordion" class="p-l-10 p-r-10" name="高级搜索">
                            我是内容
                        </div>
                        <!--顶部按钮  slot="toolbar"代表其中的内容为菜单按钮-->
                        <span slot="toolbar">
                            <div class="ui vertical animated mini button m-r-10 basic grey ">
                                <div class="hidden content">刷新</div>
                                <div class="visible content">
                                    <i class="icon refresh"></i>
                                </div>
                            </div>
                            <div class="ui vertical animated mini button m-r-10 blue">
                                <div class="hidden content">按钮名称 </div>
                                <div class="visible content">
                                    <i class="icon hand peace"></i>
                                </div>
                            </div>

                            <el-pagination class="fl-r"
                                small
                                background
                                :layout="total > pageSize ? 'total, prev, pager, next, sizes':'total, sizes'"
                                :total="total"
                                :page-size="pageSize"
                                :page-sizes="[20, 50, 100, 200, 500]">
                            </el-pagination>
                        </span>
                        <!-- 下面放置页面内容 -->
                        <div class="item one">
                            <ui-load-md file="ui-split-screen.md"></ui-load-md>
                        </div>
                    </ui-main>
                </div>
            </div>
        </ui-split-screen>
    </ui-main>
</template>
<script>
    import UiSplitScreen from './ui-split-screen'

    export default {
        components: { UiSplitScreen },
        data() {
            return {
                total: 100,
                pageSize: 5,
                data: [{
                    label: '一级 1',
                    children: [{
                        label: '二级 1-1',
                        children: [{
                            label: '三级 1-1-1'
                        }]
                    }]
                }, {
                    label: '一级 2',
                    children: [{
                        label: '二级 2-1',
                        children: [{
                            label: '三级 2-1-1'
                        }]
                    }, {
                        label: '二级 2-2',
                        children: [{
                            label: '三级 2-2-1'
                        }]
                    }]
                }, {
                    label: '一级 3',
                    children: [{
                        label: '二级 3-1',
                        children: [{
                            label: '三级 3-1-1'
                        }]
                    }, {
                        label: '二级 3-2',
                        children: [{
                            label: '三级 3-2-1'
                        }]
                    }]
                }],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                }
            };
        },
        methods: {
            handleNodeClick(data) {
                this.log(data);
            },
            showRowDetail(data) {
                // this.log(data);
            }
        },
        mounted() {}

    };
</script>

